<template>
  <view class="audioMain flex alignCenter" @click="playAudio" :style="audioStyle">
    <uv-icon name="pause-circle" v-if="music_play" color="#ffffff" size="20"></uv-icon>
    <uv-icon name="play-circle" v-else color="#ffffff" size="20"></uv-icon>
    <view class="gif flex alignCenter" v-if="music_play">
      <image src="https://qn.taozapp.cn/%E6%9C%AA%E6%A0%87%E9%A2%98-5.gif" mode="widthFix" />
    </view>
    <view class="duration">
      {{ duration_format(duration) }}”
    </view>
  </view>
</template>

<script setup lang="ts">
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();

let props = defineProps(["audioSrc", "musicId", "bgColor", "time"]);

let music_play = ref(false);
let isAudio = false;
let innerAudioContext = null;
let duration = ref(0);

let uuid = computed(() => {
  return props.musicId || Date.now();
});

let mainWidth = computed(() => {
  if (duration.value) {
    if (duration.value * 15 >= 150) {
      return 95;
    } else {
      return duration.value * 15;
    }
  } else {
    return 40;
  }
});

let audioStyle = computed(() => {
  return {
    width: mainWidth.value + "px",
    background: props.bgColor
      ? props.bgColor
      : "linear-gradient(to right,#790EFF,#9E06FF)",
  };
});

async function getTotalTime() {
  //https://qn.taozapp.cn/FiMi_hEKyu7VOTZRINE0sLBGxmCc
  //await counter.getAudioDuration(props.audioSrc);
  if (props.time) {
    duration.value = props.time;
  } else {
    let audioTime = await proxy.$utils.countAudioTime(props.audioSrc); //时长
    duration.value = audioTime;
  }
}

function init() {
  innerAudioContext = uni.createInnerAudioContext();
  innerAudioContext.autoplay = false;
  if (props.audioSrc) innerAudioContext.src = props.audioSrc;
  innerAudioContext.onEnded(() => {
    music_play.value = false;
  });
  nextTick(() => {
    musicPlay();
  });
}

function playAudio() {
  if (innerAudioContext) {
    musicPlay();
  } else {
    init();
  }
}

function musicPlay() {
  if (!isAudio) {
    //第一次播放
    innerAudioContext.onPlay(() => {
      music_play.value = true;
      isAudio = true;
    });
    innerAudioContext.play();
  } else if (music_play.value) {
    music_play.value = false;
    innerAudioContext.pause();
  } else {
    music_play.value = true;
    innerAudioContext.play();
  }
}

function duration_format(duration) {
  if (isInteger(duration)) return duration;
  let num = countDecimalPlaces(duration);
  if (num > 2) return duration.toFixed(2);
  return duration;

  function isInteger(value) {
    return (
      typeof value === "number" &&
      isFinite(value) &&
      Math.floor(value) === value
    );
  }
  function countDecimalPlaces(num) {
    if (!Number.isFinite(num)) return 0; // 如果不是有限数字，返回0
    const decimalPart = String(num).split(".")[1]; // 将数字转换为字符串并获取小数部分
    return decimalPart ? decimalPart.length : 0; // 如果有小数部分，返回小数部分的长度，否则返回0
  }
}

watch(
  () => props.audioSrc,
  (newValue, oldValue) => {
    if (newValue) getTotalTime();
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
.audioMain {
  width: 60px;
  padding: 0 5px;
  line-height: 30px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  color: white;
  max-height: 35px;
  .gif {
    width: 100%;
    height: 20px;
    image {
      height: 100% !important;
    }
  }
}
</style>
